<template>
	<view :class="[BackGround]" :style="[{'font-weight':Style,'font-family':Font,height:100 + '%',minHeight:height + 'px'}]">
		<cu-custom bgColor="bg-gradual-blue" isBack="true">
			<view slot="backText">返回</view>
			<view slot="content">粗纱故障记录</view>
		</cu-custom>
		<sear-ch :placeholder="'点击筛选按钮可根据车间机器筛选数据'" :disabl="true" @clean="clean" @input="input" @remove="remove" :message="message"></sear-ch>
		<screen-view ref="screen" @formSubmit="formSubmit" :isShow="false" :screenisShow="true" :searchisShow="false">
			<view v-if="isShow">
				<view class="cu-form-group">
					<view class="title">车间</view>
					<picker @change="PickerChange1" name="LCLASSINDEX" :value="index1" :range="picker1" range-key="LNAME">
						<view class="picker">
							{{index1 == -1 ? '请选择' : picker1[index1].LNAME}}
						</view>
					</picker>
				</view>
				<view class="cu-form-group">
					<view class="title">机器号</view>
					<picker @change="PickerChange2" name="LMACHINENO" :value="index2" :range="picker2" range-key="LNAME">
						<view class="picker">
							{{index2 == -1 ? '请选择' : picker2[index2].LNAME}}
						</view>
					</picker>
				</view>
			</view>
		</screen-view>
		<view style="margin-top: 110rpx;">
			<canvas canvas-id="canvasColumn" id="canvasColumn" :class="[rotate]" :style="{height:uheight + 'px'}" disable-scroll=true
			 @touchstart="touchColumn" @touchmove="moveColumn" @touchend="touchEndColumn"></canvas>
		</view>
		<view class="table-fixed" @tap="switchP">
			<image :class="[imgclass]" src="/static/images/phoneicon.png" mode="aspectFill"></image>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		ucharts,
		inputSearch
	} from "@/mixin/mixin.js"
	import {
		getReport,
		getselectReferList
	} from "@/service/selectList"
	import uCharts from '@/colorui/components/u-charts/u-charts.js'
	import SearCh from "@/colorui/components/search.nvue"
	import ScreenView from '@/colorui/components/ScreenView.vue'
	var canvaColumn = null;
	export default {
		mixins: [ucharts, inputSearch],
		data() {
			return {
				height: this.screenHeight,
				uheight: this.screenHeight - uni.upx2px(this.CustomBar + 115),
				dateleft: global.dateleft,
				dateright: global.dateright,
				page: 0,
				Column: "",
				rotate: 'charts-rotate',
				active: "竖屏",
				imgclass: "myimgtwo",
				cWidth: '',
				cWidth2: '',
				cHeight: '',
				cHeight2: '',
				pixelRatio: 1,
				textarea: "",
				message: '筛选',
				isShow: false,
				picker2: [{
						"LNAME": 1
					},
					{
						"LNAME": 2
					},
				],
				index1: 0,
				index2: 0,
				picker1: [],
			}
		},
		computed: {
			...mapGetters(["Style", 'Font', 'BackGround', 'BackGroundBox'])
		},
		components: {
			SearCh,
			ScreenView
		},
		onLoad() {

		},
		methods: {
			getServerData() {
				this.getReport()
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						borderWidth: 1
					},
					dataLabel: true,
					rotate: true,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						labelCount: 5,
						itemCount: 5,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						data: [{
							calibration: true,
							position: 'left',
							min: 0,
							max: 100,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '次'
							}
						}]
					},
					width: this.cWidth2 * this.pixelRatio,
					height: this.cHeight2 * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 2 / chartData.categories.length
						}
					},
				});

			},
			showColumn2(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: this,
					canvasId: canvasId,
					type: 'column',
					fontSize: 11,
					padding: [5, 15, 15, 15],
					legend: {
						show: true,
						position: 'top',
						float: 'center',
						itemGap: 30,
						padding: 5,
						margin: 5,
						borderWidth: 1
					},
					extra: {
						column: {
							width: 50
						}
					},
					dataLabel: true,
					rotate: false,
					dataPointShape: true,
					background: '#FFFFFF',
					pixelRatio: this.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					enableScroll: true,
					xAxis: {
						disableGrid: false,
						type: 'grid',
						gridType: 'dash',
						width: 50,
						itemCount: 5,
						labelCount: 5,
						scrollShow: true,
						scrollAlign: 'left',
					},
					yAxis: {
						//disabled:true
						data: [{
							calibration: true,
							position: 'left',
							min: 0,
							max: 100,
							titleFontSize: 12,
							format: (val) => {
								return val.toFixed(0) + '次'
							}
						}]
					},
					width: this.cWidth * this.pixelRatio,
					height: this.cHeight * this.pixelRatio,
					extra: {
						column: {
							type: 'group',
							width: this.cWidth * this.pixelRatio * 2 / chartData.categories.length
						}
					},
				});

			},
			touchColumn(e) {
				canvaColumn.scrollStart(e);
			},
			moveColumn(e) {
				canvaColumn.scroll(e);
			},
			touchEndColumn(e) {
				canvaColumn.scrollEnd(e);
				canvaColumn.touchLegend(e, {
					animation: true,
				});
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			PickerChange1(e) {
				this.index1 = e.detail.value
			},
			PickerChange2(e) {
				this.index2 = e.detail.value
			},
			formSubmit(e) {
				this.dateleft = e.picker1
				this.dateright = e.picker2
				this.getReport()
			},
			switchP() {
				if (this.active == '竖屏') {
					uni.showLoading({
						title: '加载中'
					});
					this.active = '横屏'
					this.imgclass = 'myimgone'
					setTimeout(() => {
						this.rotate = 'charts'
						this.showColumn2("canvasColumn", this.Column)
						uni.hideLoading();
					}, 1000)

				} else {
					uni.showLoading({
						title: '加载中'
					});
					this.active = '竖屏'
					this.imgclass = 'myimgtwo'
					setTimeout(() => {
						this.rotate = 'charts-rotate'
						this.showColumn("canvasColumn", this.Column)
						uni.hideLoading();
					}, 1000)
				}
			},
			getReport() {
				getselectReferList(9538, '表头', 'LCLASSINDEX', {}).then(res => {
					if (res.code != 0) {
						this.picker1 = res.data
						this.isShow = true
					}
				})
				getReport('2', '', '一车间', '2018-02-02', this.dateright).then(res => {
					let Column = {
						categories: [],
						series: []
					}
					res.data.forEach((val, index) => {
						Column.categories.push(val.LALARMTEXT)
					})
					Column.categories = [...new Set(Column.categories)]
					res.data.forEach((val, index) => {
						if (val.LALARMTEXT == Column.categories[0]) {
							Column.series.push({
								"data": [],
								"name": val.LMACHINENO + '(单位/次)'
							})
							Column.series.push({
								"data": [],
								"name": val.LMACHINENO + '(单位/分钟)'
							})
						}
					})
					Column.categories.forEach((item, iindex) => {
						res.data.forEach((val, index) => {
							Column.series.forEach((uval, uindex) => {
								if ((val.LMACHINENO + '(单位/次)' == uval.name && item == val.LALARMTEXT) || (val.LMACHINENO + '(单位/分钟)' == uval.name && item == val.LALARMTEXT)) {
									if (this.page == 0) {
										uval.data.push(val.LSUM)
										this.page = 1
										return
									}
									if (this.page == 1) {
										uval.data.push(val.LTIME)
										this.page = 0
										return
									}
								}
							})
						})
					})
					this.Column = Column
					this.showColumn("canvasColumn", Column);
				})
			}

		}
	}
</script>

<style>

</style>
